import React from 'react';
import {FieldCtrl, FinderSelect, GlobalProvider, ObjectSelect, ObjectEnum} from 'jh-lib';
import {Button, Form, Card} from "antd";
import Promise from "lodash-es/_Promise";
import finderConfJson from '../finderConf'
import posFinderConf from './posFinderConf'
import {pick} from "lodash-es";

const genArr = (startIndex = 0, maxResults = 20, search, cb) => {
    const arr = [];

    for (let i = startIndex; i < startIndex + maxResults; i++) {
        cb && cb();
        let id = i + 1;
        arr.push(
            {id: id, code: `code${id}`, name: `name${id}_`, spellCode: `spellCode${id}`},
        )
    }
    return arr;
};

const defaultArr = genArr();

export default class Basic extends React.Component {
    state = {
        detailLoading: false,
        list: []
    };

    formRef = React.createRef();
    startIndex = 0;

    fetchFinder(ajaxData) {
        console.log('fetchFinder ajaxData', ajaxData);
        const {searchData} = ajaxData;
        const search = searchData && searchData.search ? searchData.search : '';

        return new Promise((resolve) => {

            const arr = genArr(ajaxData.startIndex, ajaxData.maxResults, search, () => {
                this.startIndex++;
            });

            setTimeout(() => {
                resolve({
                    status: 200,
                    data: {
                        results: arr,
                        resultCount: 100,
                        maxResults: 20,
                    }
                });
            }, 1000);
        });
    }

    render() {
        return (
            <>
                <GlobalProvider>
                    <Card title={'FinderSelect'}>
                        {/*<ObjectSelect*/}
                        {/*    style={{width: '250px'}}*/}
                        {/*    defaultValue={{code: 'code900', id: 900, name: 'name900'}}*/}
                        {/*    compData={this.state.list}*/}
                        {/*    fetchList={(ajaxData) => {*/}
                        {/*        this.fetchFinder(ajaxData).then(rsp => {*/}
                        {/*            if(rsp && rsp.status === 200) {*/}
                        {/*                this.setState({list: rsp.data.results})*/}
                        {/*            }*/}
                        {/*        })*/}
                        {/*    }}*/}
                        {/*/>*/}
                        <Form ref={this.formRef}
                        >
                            <ObjectEnum
                                defaultValue={{code: 'code900', id: 900, name: 'name900'}}
                                compLabel={'ObjectEnum'}
                                fieldName={'objectEnum'}
                                needMenu={true}
                                style={{width: '250px'}}
                                fetchList={this.fetchFinder.bind(this)}
                            />
                            <FinderSelect
                                defaultValue={{code: 'code20', id: 20, name: 'name20'}}
                                fieldName={'single'}
                                compLabel={'岗位查找器'}
                                appins={this}
                                fieldCtrl={FieldCtrl.REQUIRED}
                                style={{width: '250px'}}
                                appCode={'DEPARTMENT'}
                                finderCode={'POSITION'}
                                fetchConf={(ajaxData) => {
                                    console.log('fetchConf ajaxData', ajaxData);
                                    return new Promise((resolve) => {
                                        setTimeout(() => {
                                            resolve(pick(posFinderConf, ['status']));
                                        }, 200);
                                    });
                                }}
                            />

                            <FinderSelect
                                fieldCtrl={FieldCtrl.REQUIRED}
                                fieldName={'resourceTarget'}
                                compLabel={'多选'}
                                appins={this}
                                onRef={(ins) => {
                                    this.finderIns = ins;
                                }}
                                multi={true}
                                style={{width: '250px'}}
                                appCode={'ACCOUNTING_ITEM'}
                                finderCode={'FINDER_ACCOUNTINGITEM'}
                                needDropdown={false}
                                needMenu={true}
                                fetchConf={(ajaxData) => {
                                    console.log('fetchConf ajaxData', ajaxData);
                                    return new Promise((resolve) => {
                                        setTimeout(() => {
                                            resolve(finderConfJson);
                                        }, 1000);
                                    });
                                }}
                            />
                        </Form>
                        <div style={{padding: '16px'}}>

                            <Button onClick={() => {
                                this.formRef.current.validateFields().then(values => {
                                    console.log('values', values);
                                }).catch(errInfo => {
                                    console.log('errInfo', errInfo);
                                });
                            }}>getFormData</Button>
                        </div>
                    </Card>
                </GlobalProvider>
            </>)
    }
}
